<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'
import { ToastUtil } from "@/plugins/toast"
import { userLoginStore } from '@/store/modules/login';
import logoImage from '@/assets/login/logo2.png'; // 导入图片

const account = ref('');
const password = ref('');
const loginStore = userLoginStore();
const router = useRouter();

const handleLogin = async () => {
    try {
        await loginStore.login({ account: account.value, password: password.value });
        ToastUtil.success({ message: '登录成功', duration: 1500 });
        // 登录成功后的处理，例如跳转到首页
        console.log('登录成功');
        router.push({ path: "index" })
    } catch (error: any) {
        ToastUtil.fail({ message: error, duration: 1500 });
    }
};
</script>
<template>
    <div class="login-wrapper">
        <div class="login-card">
            <div class="login-header">
                <van-image class="login-logo" :src="logoImage" />
                <h3>数字化班组管理系统</h3>
                <p></p>
            </div>
            <van-form @submit="handleLogin" label-width="50">
                <van-field v-model="account" name="account" label="账号" placeholder="请输入账号" autocomplete="username" />
                <br>
                <van-field v-model="password" name="password" label="密码" type="password" placeholder="请输入密码"
                    autocomplete="current-password" />
                <div class="button-group">
                    <van-button round block type="primary" class="animated-button" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<style scoped lang="scss">
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.login-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    background: url(src/assets/login/bg.png) no-repeat center center;
    background-size: cover;
    transition: background-image 1.5s, transform 0.1s;
    will-change: background-image, transform;
    transform: translateZ(0);
    overflow: hidden;
}

.login-card {
    position: fixed;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 0 50px rgb(76 67 224);
    width: 100%;
    max-width: 45%;
    text-align: center;
    box-sizing: border-box;
    animation: fadeIn 1.5s ease-in-out;

    .login-header {
        margin-bottom: 2rem;

        .login-logo {
            margin-bottom: 1rem;
        }

        h3 {
            margin: 0;
            color: #ffffff;
            font-weight: 700;
            font-size: 1.2rem;
        }

        p {
            margin: 0.5rem 0 0;
            color: #ffffff;
            font-size: 1rem;
        }
    }


    :deep(.van-field__label) {
        font-weight: bold;
    }

    .button-group {
        margin-top: 1.5rem;

        .animated-button {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
            font-weight: bold;
            /* 添加过渡效果 */
        }

        .animated-button:hover {
            background-color: #1e7ee4;
        }

        /* 按钮点击效果 */
        .animated-button:active {
            background-color: #1e71ef;
            transform: scale(0.95);
            /* 点击时缩小按钮 */
        }
    }
}

/* 媒体查询部分 */

@media (max-width: 1440px) {
    .login-card {
        max-width: 60%;
        box-shadow: 0 0 50px rgb(76 67 224);
    }
}

@media (max-width: 1280px) {
    .login-card {
        max-width: 65%;
        box-shadow: 0 0 50px rgb(76 67 224);
    }
}

@media (max-width: 980px) {
    .login-card {
        max-width: 80%;
        box-shadow: 0 0 50px rgb(76 67 224);
    }
}

@media (max-width: 768px) {
    .login-card {
        max-width: 85%;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    }

    .login-wrapper {
        background: url(src/assets/login/login.png) no-repeat center center;
        background-size: cover;
    }
}

@media (max-width: 480px) {
    .login-card {
        max-width: 95%;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    }

    .login-wrapper {
        background: url(src/assets/login/login.png) no-repeat center center;
        background-size: cover;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(500px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>